@extends('simple-h5.views.layout')
@section('content')
    <link rel="stylesheet" href="/themes/simple-h5/static/css/index.css">
    <link rel="stylesheet" href="/static/libs/swiper-6.8.4/swiper-bundle.min.css">
    <script src="/static/libs/swiper-6.8.4/swiper-bundle.min.js"></script>
    <link rel="stylesheet" href="/themes/simple-h5/static/css/product.css?v=1.1">

    <div class="swiper-container">
        <div class="swiper-wrapper">
            @foreach ($product_info['images_url'] as $k=>$item)
                <div class="swiper-slide">
                    <div class="swiper-slide-img">
                        <img src="{{ $item }}">
                    </div>
                </div>
            @endforeach
        </div>
        <div class="swiper-pagination" slot="pagination"></div>
    </div>
    <div class="product-item">
        <div class="product-item-title text-ellipsis">{{$product_info['name']}}</div>
        <div class="product-item-buy">
            <div class="product-item-buy-l">
                <div class="product-item-buy-l-price">
                    <span>现价:</span>
                    <span>{{$product_info['price']}}</span>
                </div>
                <div class="product-item-buy-l-origin-price">
                    <span>原价:</span>
                    <span>{{$product_info['market_price']}}</span>
                </div>
            </div>
            @if($product_info['channel']->count()>0)
            <a class="product-item-buy-r">立即购买</a>
            @endif
        </div>
        <div class="product-item-desc">
            <div class="product-item-desc-header">产品详情</div>
            <div class="product-item-desc-text">{!! $product_info['description'] !!}</div>
        </div>
    </div>
    <div class="channel-menu-bg"></div>
    <div class="channel-menu-con">
        <div class="channel-menu-header">
            <div></div>
            <div class="channel-menu-header-text">
                <span>购买渠道</span><img src="/static/images/shopping-cart.png">
            </div>
            <div></div>
        </div>
        <div class="channel-menu-main">
            <ul>
                @foreach ($product_info['channel'] as $item)
                    <li>
                        <a href="{{$item->url}}">{{$item->name}}</a>
                    </li>
                @endforeach
            </ul>
        </div>
    </div>

    <script>
        $(function(){
            var mySwiper = new Swiper ('.swiper-container', {
                loop:true,
                autoplay:3000,
                //其他设置
                pagination: {
                    el: '.swiper-pagination',
                    type: 'fraction',
                    renderFraction: function (currentClass, totalClass) {
                        return '<span class="' + currentClass + '"></span>' +
                            ' / ' +
                            '<span class="' + totalClass + '"></span>';
                    },
                },
            });

            //menu
            $('.product-item-buy-r').click(function(){
                //var winH = $(window).height();
                var docH = $(document).height();
                $('.channel-menu-bg').height(docH);
                var menuConEle = $('.channel-menu-bg');
                if(menuConEle.hasClass('channel-menu-active')){
                    menuConEle.removeClass('channel-menu-active');
                }else{
                    menuConEle.addClass('channel-menu-active');
                }
                var channelMenuCon = $('.channel-menu-con');
                if(channelMenuCon.hasClass('channel-menu-active')){
                    channelMenuCon.removeClass('channel-menu-active');
                }else{
                    channelMenuCon.addClass('channel-menu-active');
                }
            });

            $('.channel-menu-bg').click(function(){
                var menuConEle = $('.channel-menu-bg');
                menuConEle.height(0);
                menuConEle.removeClass('channel-menu-active');
                var channelMenuCon = $('.channel-menu-con');
                channelMenuCon.removeClass('channel-menu-active');
            });
        })
    </script>
@endsection
